<template>
	<a-modal width="1050px" v-model:visible="visible" :title="maptitle" @cancel="handleClose">
			<baidu-map ref="map"
					   api-key="VU0DMaNj9iJtLOnUA6zE5DyuUTmRXQYp"
					   mapType = "BMAP_SATELLITE_MAP"
					   @complete="handleComplete" />
	</a-modal>
</template>

<script setup name="layerMap">
	import BaiduMap from '@/components/Map/baiduModelMap/index.vue'
	import transferBillApi from '@/api/biz/transferbill/transferBillApi'

	// 弹窗是否打开
	const visible = ref(false)
	const maptitle = ref()
	const emit = defineEmits({ successful: null })
	const map = ref(null)
	const respObj = ref([])


	const showModal = (record) => {
		if (record) {
			let param = {
				transferBillId : record.transferBillId
			}
			maptitle.value = "联单"+record.transportNum+"历史轨迹"
			// 取轨迹信息
			transferBillApi.listPosition(param).then((result) => {
				respObj.value = result;
				let longitude = result.startPosition.position[0]
				let latitude = result.startPosition.position[1]
				console.log(longitude+"==中心点坐标==="+latitude)
				map.value.setCenter(longitude,latitude,12)
				map.value.clearOverlay()
				map.value.renderMarker([result.startPosition])
				map.value.renderMarker([result.endPosition])
				showLine()
			})
		}
		visible.value = true;
	}

	const showLine = () => {
		map.value.renderPolyline(respObj.value.positionList,
			{
				strokeColor: '#ff0000',
				strokeWeight: 8
			}
		)
	}

	// 地图渲染完成执行
	const handleComplete = () => {

	}

	const handleClose = () => {
		map.value.clearOverlay();
		visible.value = false
	}

	// 抛出函数
	defineExpose({
		showModal
	})
</script>
<style lang="less">
.map {
	width: 100%;
	height: 550px;
}
</style>
